<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbar title="主题设置">
			<!-- <template #right>
				<text class="demo-link" @click="goToDemo">演示</text>
			</template> -->
		</CustomNavbar>

		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-bg">
				<view class="header-decoration"></view>
				<view class="header-decoration-2"></view>
			</view>
			<view class="header-content">
				<text class="page-title">🎨 主题设置</text>
				<text class="page-subtitle">个性化你的松鼠记账</text>
			</view>
		</view>

		<!-- 当前主题展示 -->
		<view class="current-theme-section">
			<view class="section-title">
				<text class="title-text">当前主题</text>
				<text class="title-icon">{{currentTheme.icon}}</text>
			</view>
			
			<view class="current-theme-card">
				<view class="theme-preview-large">
					<view class="preview-header" :style="getThemeHeaderStyle()">
						<view class="preview-logo">{{currentTheme.icon}}</view>
						<text class="preview-title">{{currentTheme.name}}</text>
					</view>
					<view class="preview-content">
						<view class="preview-stats">
							<view class="stat-item">
								<text class="stat-label">本月收入</text>
								<text class="stat-value income" :style="{ color: currentTheme.colors.success }">+2,580.00</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">本月支出</text>
								<text class="stat-value expense" :style="{ color: currentTheme.colors.error }">-1,850.00</text>
							</view>
						</view>
						<view class="preview-records">
							<view class="record-item" v-for="(record, index) in previewRecords" :key="index">
								<view class="record-icon" :style="{ backgroundColor: record.color }">{{record.icon}}</view>
								<view class="record-info">
									<text class="record-title">{{record.title}}</text>
									<text class="record-time">{{record.time}}</text>
								</view>
								<text class="record-amount" :style="{ color: record.type === 'income' ? currentTheme.colors.success : currentTheme.colors.error }">
									{{record.type === 'income' ? '+' : '-'}}{{record.amount}}
								</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="theme-description">
					<text class="desc-text">{{currentTheme.description}}</text>
				</view>
			</view>
		</view>

		<!-- 主题选择网格 -->
		<view class="themes-section">
			<view class="section-title">
				<text class="title-text">选择主题</text>
				<text class="themes-count">{{themes.length}} 个主题</text>
			</view>
			
			<view class="themes-grid">
				<view 
					v-for="theme in themes" 
					:key="theme.id"
					class="theme-card"
					:class="{ 
						active: theme.id === currentTheme.id,
						previewing: previewingTheme === theme.id 
					}"
					@click="selectTheme(theme.id)"
					@touchstart="startPreview(theme.id)"
					@touchend="endPreview"
					@touchcancel="endPreview"
				>
					<!-- 主题预览 -->
					<view class="theme-preview">
						<view class="preview-bg" :style="{ background: `linear-gradient(135deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` }">
							<view class="preview-shapes">
								<view class="shape shape-1" :style="{ backgroundColor: theme.colors.accent + '40' }"></view>
								<view class="shape shape-2" :style="{ backgroundColor: theme.colors.accentLight + '30' }"></view>
							</view>
							<view class="preview-icon">{{theme.icon}}</view>
						</view>
						
						<view class="preview-palette">
							<view class="color-dot" :style="{ backgroundColor: theme.colors.primary }"></view>
							<view class="color-dot" :style="{ backgroundColor: theme.colors.accent }"></view>
							<view class="color-dot" :style="{ backgroundColor: theme.colors.success }"></view>
							<view class="color-dot" :style="{ backgroundColor: theme.colors.error }"></view>
						</view>
					</view>
					
					<!-- 主题信息 -->
					<view class="theme-info">
						<text class="theme-name">{{theme.name}}</text>
						<text class="theme-desc">{{theme.description}}</text>
					</view>
					
					<!-- 选中标识 -->
					<view v-if="theme.id === currentTheme.id" class="selected-badge">
						<text class="badge-text">使用中</text>
					</view>
					
					<!-- 预览标识 -->
					<view v-if="previewingTheme === theme.id" class="preview-badge">
						<text class="badge-text">预览中</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作区域 -->
		<view class="bottom-actions">
			<button class="action-btn reset-btn" @click="resetToDefault">
				<text class="btn-icon">🔄</text>
				<text class="btn-text">恢复默认</text>
			</button>
			<button class="action-btn save-btn" @click="saveThemeSettings" :disabled="!hasChanges">
				<text class="btn-icon">💾</text>
				<text class="btn-text">保存设置</text>
			</button>
		</view>
	</view>
</template>

<script>
	import themeManager from '@/utils/theme.js'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				themes: [],
				currentTheme: {},
				selectedTheme: null,
				previewingTheme: null,
				previewTimer: null,
				previewRecords: [
					{
						icon: '🍔',
						title: '午餐',
						time: '12:30',
						amount: '35.00',
						type: 'expense',
						color: '#F39C12'
					},
					{
						icon: '💰',
						title: '工资',
						time: '09:00',
						amount: '8000.00',
						type: 'income',
						color: '#27AE60'
					},
					{
						icon: '🚗',
						title: '打车',
						time: '08:15',
						amount: '25.00',
						type: 'expense',
						color: '#3498DB'
					}
				]
			}
		},
		computed: {
			hasChanges() {
				return this.selectedTheme && this.selectedTheme !== this.currentTheme.id;
			}
		},
		onLoad() {
			this.loadThemes();
			this.setupThemeListener();
		},
		onUnload() {
			this.cleanup();
		},
		methods: {
			// 加载主题数据
			loadThemes() {
				this.themes = themeManager.getThemes();
				this.currentTheme = themeManager.getCurrentTheme();
				this.selectedTheme = this.currentTheme.id;
			},
			
			// 设置主题监听器
			setupThemeListener() {
				this.themeListener = themeManager.addListener((theme) => {
					this.currentTheme = theme;
				});
			},
			
			// 清理资源
			cleanup() {
				if (this.themeListener) {
					this.themeListener();
				}
				this.clearPreviewTimer();
			},
			
			// 选择主题
			selectTheme(themeId) {
				this.selectedTheme = themeId;
				
				// 立即应用主题预览
				this.previewTheme(themeId);
				
				// 显示选择反馈
				uni.vibrateShort();
			},
			
			// 开始预览主题（长按）
			startPreview(themeId) {
				this.clearPreviewTimer();
				this.previewTimer = setTimeout(() => {
					this.previewTheme(themeId);
					uni.vibrateShort();
				}, 300);
			},
			
			// 结束预览
			endPreview() {
				this.clearPreviewTimer();
			},
			
			// 预览主题
			previewTheme(themeId) {
				this.previewingTheme = themeId;
				themeManager.previewTheme(themeId);
			},
			
			// 取消预览
			cancelPreview() {
				this.previewingTheme = null;
				themeManager.cancelPreview();
			},
			
			// 清除预览定时器
			clearPreviewTimer() {
				if (this.previewTimer) {
					clearTimeout(this.previewTimer);
					this.previewTimer = null;
				}
			},
			
			// 保存主题设置
			saveThemeSettings() {
				if (!this.selectedTheme) return;
				
				uni.showLoading({
					title: '应用主题中...'
				});
				
				setTimeout(() => {
					themeManager.setTheme(this.selectedTheme);
					
					uni.hideLoading();
					uni.showToast({
						title: `已切换到${themeManager.getTheme(this.selectedTheme).name}主题`,
						icon: 'success',
						duration: 2000
					});
				}, 800);
			},
			
			// 重置到默认主题
			resetToDefault() {
				uni.showModal({
					title: '重置主题',
					content: '确定要重置到默认主题吗？',
					success: (res) => {
						if (res.confirm) {
							this.selectTheme('cute');
							this.saveThemeSettings();
						}
					}
				});
			},
			
			// 获取主题头部样式
			getThemeHeaderStyle() {
				return {
					background: `linear-gradient(135deg, ${this.currentTheme.colors.primary}, ${this.currentTheme.colors.primaryLight})`,
					color: this.currentTheme.colors.textInverse
				};
			},
			
			// 跳转到主题演示页面
			goToDemo() {
				uni.navigateTo({
					url: '/pages/theme-demo/theme-demo'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding-bottom: 120rpx; // 为底部操作区域预留空间
	}
	
	/* 演示链接样式 */
	.demo-link {
		font-size: 28rpx;
		color: $cute-accent;
		cursor: pointer;
		padding: 10rpx 15rpx;
		border-radius: 15rpx;
		transition: all 0.3s;
		
		&:hover {
			background: $cute-accent-light;
			color: white;
		}
	}
	
	/* 页面头部 */
	.page-header {
		position: relative;
		height: 300rpx;
		margin-top: calc(var(--status-bar-height) + 88rpx); // 为导航栏预留空间
		margin-bottom: 30rpx;
		overflow: hidden;
	}
	
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $cute-gradient-primary;
	}
	
	.header-decoration {
		position: absolute;
		top: -50%;
		right: -20%;
		width: 300rpx;
		height: 300rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		animation: float 8s ease-in-out infinite;
	}
	
	.header-decoration-2 {
		position: absolute;
		bottom: -30%;
		left: -10%;
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 182, 193, 0.1);
		border-radius: 50%;
		animation: float 6s ease-in-out infinite reverse;
	}
	
	.header-content {
		position: relative;
		z-index: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		padding-top: calc(var(--status-bar-height) + 30rpx);
	}
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 15rpx;
		text-align: center;
	}
	
	.page-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		50% { transform: translateY(-30px) rotate(180deg); }
	}
	
	/* 通用区域样式 */
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}
	
	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}
	
	.title-icon {
		font-size: 32rpx;
	}
	
	.themes-count {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		background: $cute-bg-tertiary;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	/* 当前主题展示 */
	.current-theme-section {
		margin-bottom: 50rpx;
	}
	
	.current-theme-card {
		margin: 0 30rpx;
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		overflow: hidden;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.theme-preview-large {
		height: 400rpx;
	}
	
	.preview-header {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		position: relative;
	}
	
	.preview-logo {
		font-size: 48rpx;
	}
	
	.preview-title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.preview-content {
		flex: 1;
		padding: 30rpx;
		background: $cute-bg-secondary;
	}
	
	.preview-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: $cute-bg-primary;
		border-radius: 15rpx;
	}
	
	.stat-item {
		text-align: center;
	}
	
	.stat-label {
		display: block;
		font-size: 24rpx;
		color: $cute-text-tertiary;
		margin-bottom: 10rpx;
	}
	
	.stat-value {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.preview-records {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.record-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 15rpx;
		background: $cute-bg-primary;
		border-radius: 15rpx;
	}
	
	.record-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: white;
	}
	
	.record-info {
		flex: 1;
	}
	
	.record-title {
		display: block;
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}
	
	.record-time {
		display: block;
		font-size: 22rpx;
		color: $cute-text-tertiary;
		margin-top: 5rpx;
	}
	
	.record-amount {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.theme-description {
		padding: 30rpx;
		border-top: 2rpx solid $cute-divider;
		text-align: center;
	}
	
	.desc-text {
		font-size: 26rpx;
		color: $cute-text-secondary;
		line-height: 1.5;
	}
	
	/* 主题选择网格 */
	.themes-section {
		margin-bottom: 50rpx;
	}
	
	.themes-grid {
		padding: 0 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
	
	.theme-card {
		background: $cute-bg-secondary;
		border-radius: 20rpx;
		overflow: hidden;
		border: 3rpx solid transparent;
		box-shadow: $cute-card-shadow;
		transition: all 0.3s;
		position: relative;
		
		&:hover {
			transform: translateY(-8rpx);
			box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
		}
		
		&.active {
			border-color: $cute-primary;
			box-shadow: 0 0 0 4rpx rgba(144, 238, 144, 0.2);
		}
		
		&.previewing {
			border-color: $cute-accent;
			box-shadow: 0 0 0 4rpx rgba(255, 182, 193, 0.3);
			animation: preview-pulse 2s infinite;
		}
	}
	
	@keyframes preview-pulse {
		0%, 100% { transform: translateY(-8rpx) scale(1); }
		50% { transform: translateY(-8rpx) scale(1.02); }
	}
	
	.theme-preview {
		height: 200rpx;
		position: relative;
	}
	
	.preview-bg {
		height: 140rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.preview-shapes {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	.shape {
		position: absolute;
		border-radius: 50%;
		
		&.shape-1 {
			width: 80rpx;
			height: 80rpx;
			top: -20rpx;
			right: -20rpx;
		}
		
		&.shape-2 {
			width: 60rpx;
			height: 60rpx;
			bottom: -15rpx;
			left: -15rpx;
		}
	}
	
	.preview-icon {
		font-size: 48rpx;
		position: relative;
		z-index: 1;
		color: white;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	
	.preview-palette {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		padding: 0 20rpx;
	}
	
	.color-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 2rpx solid white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.theme-info {
		padding: 25rpx 20rpx;
		text-align: center;
	}
	
	.theme-name {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 8rpx;
	}
	
	.theme-desc {
		font-size: 22rpx;
		color: $cute-text-tertiary;
		line-height: 1.4;
	}
	
	/* 状态标识 */
	.selected-badge, .preview-badge {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		padding: 6rpx 12rpx;
		border-radius: 15rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
	}
	
	.selected-badge {
		background: $cute-primary;
	}
	
	.preview-badge {
		background: $cute-accent;
	}
	
	.badge-text {
		color: white;
		font-size: 20rpx;
		font-weight: 500;
	}
	
	/* 自定义主题提示 */
	.custom-theme-tip {
		margin: 0 30rpx 50rpx;
		padding: 30rpx;
		background: linear-gradient(135deg, $cute-bg-tertiary, $cute-bg-primary);
		border-radius: $cute-border-radius;
		border: 2rpx solid $cute-border;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.tip-icon {
		font-size: 40rpx;
	}
	
	.tip-content {
		flex: 1;
	}
	
	.tip-title {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 8rpx;
	}
	
	.tip-desc {
		font-size: 24rpx;
		color: $cute-text-secondary;
		line-height: 1.4;
	}
	
	.demo-btn {
		background: linear-gradient(135deg, $cute-accent, $cute-accent-light);
		color: white;
		border: none;
		border-radius: 25rpx;
		padding: 15rpx 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.3s;
		
		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
		}
	}
	
	.demo-text {
		font-size: 24rpx;
	}
	
	/* 底部操作区域 */
	.bottom-actions {
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 30rpx;
		border-top: 2rpx solid $cute-divider;
		display: flex;
		gap: 20rpx;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
	}
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s;
		
		&.reset-btn {
			background: $cute-bg-tertiary;
			color: $cute-text-secondary;
			
			&:hover {
				background: $cute-border;
				transform: translateY(-2rpx);
			}
		}
		
		&.save-btn {
			background: linear-gradient(135deg, $cute-primary, $cute-primary-light);
			color: white;
			
			&:hover:not(:disabled) {
				transform: translateY(-2rpx);
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
			}
			
			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}
	
	.btn-icon {
		font-size: 32rpx;
	}
	
	.btn-text {
		font-size: 28rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.themes-grid {
			grid-template-columns: 1fr;
		}
		
		.preview-stats {
			flex-direction: column;
			gap: 20rpx;
		}
		
		.stat-item {
			text-align: left;
		}
	}
</style>
